<template>
  <div>
    <textarea v-if="!inline" :id="tinymceId" style="visibility: hidden" />
    <!--    内联模式-->
    <div v-else :id="`${tinymceId}inline`" />
  </div>
</template>

<script>
import {inlineToolbar, plugins, toolbar} from "./config"
import {ACCESS_TOKEN, ACCESS_TOKEN_NAME} from "../../api/request"
import loadTinymce from "../../utils/loadTinymce"

let num = 1

export default {
  name: "FormTinymce",
  props: {
    id: {
      type: String,
      default: () => {
        num === 10000 && (num = 1)
        return `tinymce${+new Date()}${num++}`
      }
    },
    value: {
      default: ""
    },
    toolbar: [],
    // 内联模式
    inline: {
      default: false
    }
  },
  data() {
    return {
      tinymceId: this.id,
      editor: null
    }
  },
  watch: {
    // 实现v-model更新内容
    value(val, oldVal) {
      if (this.editor && val !== oldVal && val !== this.editor.getContent()) {
        this.editor.setContent(val)
      }
    }
  },
  mounted() {
    const token = localStorage.getItem(ACCESS_TOKEN)
    const tokenName = localStorage.getItem(ACCESS_TOKEN_NAME)
    const uploadUrl = `${process.env.VUE_APP_API_ROOT}/user/file/upload`
    // eslint-disable-next-line global-require
    let finalToolbar = []
    if (this.inline) {
      finalToolbar = this.toolbar ? this.toolbar : inlineToolbar
    } else {
      finalToolbar = this.toolbar ? this.toolbar : toolbar
    }
    let conf = {
      selector: `#${this.tinymceId}${this.inline ? "inline" : ""}`,
      language: "zh_CN",
      menubar: "false",
      icons: 'tduck',
      skin: "tduck",
      // skin_url: "/tinymce/skins/ui/tduck",
      // content_css: "/tinymce/skins/content/tduck",
      cache_suffix: "?v=0.0.3",
      plugins,
      inline: this.inline,
      toolbar: finalToolbar,
      toolbar_drawer: "sliding",
      entity_encoding:'row', // 所有字符都将以非实体形式保存，避免出现部分符号变成 html 编码
      toolbar_mode: "sliding",
      height: 200,
      fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
      branding: false,
      object_resizing: false,
      end_container_on_empty_block: true,
      powerpaste_word_import: "clean",
      code_dialog_height: 450,
      code_dialog_width: 1000,
      advlist_bullet_styles: "square",
      advlist_number_styles: "default",
      default_link_target: "_blank",
      link_title: false,
      statusbar: false,
      // image_dimensions: false, // 禁用输入图片宽高
      // content_style: "img {max-width:100%;}",
      nonbreaking_force_tab: true,
      images_upload_handler(blobInfo, succFun, failFun) {
        const file = blobInfo.blob() // 转化为易于理解的file对象
        const xhr = new XMLHttpRequest()
        xhr.withCredentials = false
        xhr.open("POST", uploadUrl)
        xhr.setRequestHeader(`${tokenName}`, `${token}`)
        xhr.onload = function () {
          if (xhr.status !== 200) {
            failFun(`HTTP Error: ${xhr.status}`)
            return
          }
          const json = JSON.parse(xhr.responseText)
          if (!json || typeof json.data !== "string") {
            failFun(`Invalid JSON: ${xhr.responseText}`)
            return
          }
          succFun(json.data)
        }
        const formData = new FormData()
        formData.append("file", file, file.name) // 此处与源文档不一样
        xhr.send(formData)
      }
    }
    loadTinymce(tinymce => {
      conf = Object.assign(conf, this.$attrs)
      conf.init_instance_callback = editor => {
        this.editor = editor
        if (this.value) editor.setContent(this.value)
        editor.on("change keyup undo redo", () => {
          editor.save()
          this.$emit("input", editor.getContent())
        })
        editor.on("blur", () => {
          this.$emit("blur")
        })
      }
      tinymce.init(conf)
    })
  },
  destroyed() {
    this.destroyTinymce()
  },
  methods: {
    destroyTinymce() {
      if (!window.tinymce) return
      const tinymceInstance = window.tinymce.get(this.tinymceId)
      if (tinymceInstance) {
        tinymceInstance.destroy()
      }
    }
  }
}
</script>
<style>
/* 在el-dialog中tinymce z-index 被太小而被遮挡时要加这两句 */
.tox-tinymce-aux {
  z-index: 99999 !important;
}

.tinymce.ui.FloatPanel {
  z-index: 99;
}
</style>
